<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style type="text/css">
.kv-item {
	padding-left: 100px;
	padding-bottom: 20px;
}

.kv-label {
	display: inline;
	height: 28px;
	line-height: 28px;
	margin-left: -100px;
	float: left;
	text-align: right;
	width: 100px;
}

.text-align {
	border: 1px solid #474E63;
	color: #0A1844;
	height: 26px;
	line-height: 26px;
	padding: 0 2px;
	width: 177px;
	text-align: left;
}
</style>
<!--此处插入JS代码-->
<script type="text/javascript">
	//判断前三个表单元素（用户名、密码、确认密码是否为空）
	function check(Form) {
		var check = true;
		var flag = 0;
		for (i = 0; i < 3; i++) {
			if (Form.elements[i].value == "") {
				alert(Form.elements[i].title + "不能为空！");
				Form.elements[i].focus();
				check = false;
				return false;
			}
			//判断两次输入的密码是否相同
			if (i == 2)
				if (Form.pwd.value != Form.repwd.value) {
					alert("两次输入密码不同，请重新输入！");
					Form.repwd.value = "";
					Form.pwd.value = "";
					//Form.pwd.focus();
					i = i - 2;
					continue;
				}

		}
		return check;
	}
</script>
</head>
<body>
	<div id="main">
		<form name="personalForm" method="post" action="" onSubmit="return check(this)">
			<div class="kv-item">
				<span class="kv-label">
					<label class="tsl" for="username">用户名：</label>
				</span>
				<input type="text" name="username" class="text-align" id="username" placeholder="*必填项" autofocus
					size="25" title="用户名">
			</div>
			<div class="kv-item">
				<span class="kv-label">
					<label class="tsl" for="pwd">密&nbsp;码：</label>
				</span>
				<input type="password" name="pwd" class="text-align" id="pwd" placeholder="*必填项" size="25"
					title="密码">
			</div>
			<div class="kv-item">
				<span class="kv-label">
					<label class="tsl" for="repwd">确认密码：</label>
				</span>
				<input type="password" name="repwd" class="text-align" id="repwd" placeholder="*必填项" size="25"
					title="确认密码">
			</div>
			<div class="kv-item">
				<span class="kv-label">
					<label class="tsl" for="sex_boy">性&nbsp;别：</label>
				</span>
				<input type="radio" name="sex" id="sex_boy" value="男" checked>
				男
				<input type="radio" name="sex" id="sex_girl" value="女">
				女
			</div>
			<div class="kv-item">
				<span class="kv-label">
					<label class="tsl" for="student">职&nbsp;业：</label>
				</span>
				<select name="job">
					<option id="student" value="学生" selected="selected">学生</option>
					<option value="职员">职员</option>
					<option value="经理">经理</option>
					<option value="军人">军人</option>
					<option value="自由人">自由人</option>
				</select>
			</div>
			<div class="kv-item">
				<span class="kv-label">
					<label class="tsl">个人爱好：</label>
				</span>
				<input type="checkbox" name="Computer" value="电脑网络">
				电脑网络&nbsp;
				<input type="checkbox" name="Vedio" value="影视娱乐">
				影视娱乐&nbsp;
				<input type="checkbox" name="Card" value="棋牌娱乐">
				棋牌娱乐
				<br>
				<input type="checkbox" name="Book" value="读书读报">
				读书读报&nbsp;
				<input type="checkbox" name="Food" value="美酒佳肴">
				美酒佳肴&nbsp;
				<input type="checkbox" name="Art" value="绘画书法">
				绘画书法
			</div>
			<div class="kv-item">
				<span class="kv-label">
					<label class="tsl">个人说明：</label>
				</span>
				<textarea class="text" rows="10" cols="30"></textarea>
			</div>
			<div class="kv-item">
				<input type="submit" name="submit" id="submit" value="提交">
				<input type="reset" name="reset" id="reset" value="重置">
			</div>
</body>
</html>